<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2023-10-31 08:40:35
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2024-02-02 08:36:17
 * @FilePath: \vue-admin-template\src\views\login\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="login-container dashboard">
    <form class="form_container">

      <div class="title_container">
        <p class="title">欢迎光临</p>

      </div>
      <br>
      <div class="input_container" style="margin-bottom: 10px;">
        <img class="imgIcon" style="" src="../../assets/登录/用户名.png" alt="">
        <input v-model="loginForm.username" autocomplete="new-password" placeholder="请输入用户名" name="input-name" type="text"
          class="input_field" id="email_field">
      </div>
      <div class="input_container">
        <img class="imgIcon" style="" src="../../assets/登录/密码.png" alt="">
        <input v-model="loginForm.password" autocomplete="new-password" placeholder="请输入密码" name="input-name"
          type="password" class="input_field" id="password_field">
      </div>
      <div style="width: 100%;text-align: right;margin-bottom: 20px;">
        <!-- <el-checkbox v-model="checked">记住登录名</el-checkbox> -->
      </div>
      <el-button @click="handleLogin" type="primary" style="width: 100%;" :loading="loading">登 录</el-button>
      <div style="color: #003366;font-size: 13px;cursor: pointer;margin-bottom: 20px;">
        忘记密码
      </div>

    </form>
  </div>
</template>

<script>
import { validUsername } from '@/utils/validate'

export default {
  name: 'Login',
  data() {
    const validateUsername = (rule, value, callback) => {
      if (!validUsername(value)) {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error('The password can not be less than 6 digits'))
      } else {
        callback()
      }
    }
    return {
      checked: '',
      loginForm: {
        username: '',
        password: ''
      },
      loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {
      // this.$router.push({ path:  '/' })
      this.loading = true
      this.$store.dispatch('user/login', this.loginForm).then(() => {
        this.$router.push({ path: '/' })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })

    }
  }
}
</script>

<style >
.dashboard input::-webkit-input-placeholder {
  color: #aab2bd;
  font-size: 14px;
}

.dashboard .el-button--primary {
  background-color: #003366;
  border-color: #003366;
}

/* 设置带边框的checkbox，选中后边框的颜色 */
.dashboard.is-bordered.is-checked {
  border-color: #003366;
}

/* 设置选中后的文字颜色 */
.dashboard .el-checkbox__input.is-checked+.el-checkbox__label {
  color: #003366;
}

/* 设置选中后对勾框的边框和背景颜色 */
.dashboard .el-checkbox__input.is-checked .el-checkbox__inner,
.myRedCheckBox .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: #003366;
  background-color: #003366;
}

/* 设置checkbox获得焦点后，对勾框的边框颜色 */
.dashboard .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #003366;
}

/* 设置鼠标经过对勾框，对勾框边框的颜色 */
.dashboard .el-checkbox__inner:hover {
  border-color: #003366;
}
</style>

<style lang="scss" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background-image: url('../../assets/登录/登录bg.png');
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.form_container {
  position: absolute;
  right: 15%;
  top: 25%;
  width: fit-content;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 15px;
  padding: 50px 40px 20px 40px;
  background-color: #ffffff;
  box-shadow: 0px 106px 42px rgba(0, 0, 0, 0.01),
    0px 59px 36px rgba(0, 0, 0, 0.05), 0px 26px 26px rgba(0, 0, 0, 0.09),
    0px 7px 15px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  font-family: "Inter", sans-serif;
}


.title_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #212121;
}

.subtitle {
  font-size: 0.725rem;
  max-width: 80%;
  text-align: center;
  line-height: 1.1rem;
  color: #8B8E98
}

.input_container {
  width: 100%;
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  position: relative;
}

.icon {
  width: 20px;
  position: absolute;
  z-index: 99;
  left: 12px;
  bottom: 9px;
}

.input_label {
  font-size: 0.75rem;
  color: #8B8E98;
  font-weight: 600;
}

.input_field {
  width: 280px;
  height: 45px;
  padding: 0 0 0 40px;
  border-radius: 4px;
  outline: none;
  border: none;
  background-color: #F5F6F8;

}

.input_field:focus {
  border: 1px solid transparent;
  box-shadow: 0px 0px 0px 2px #003366;
  background-color: transparent;
}

.sign-in_btn {
  width: 100%;
  height: 40px;
  border: 0;
  background: #003366;
  border-radius: 7px;
  outline: none;
  color: #ffffff;
  cursor: pointer;
}

.imgIcon {
  width: 17px;
  height: 17px;
  position: absolute;
  left: 10px;
  top: 15px;
}
</style>
